import React from 'react';
import { Form, Input, Checkbox, message } from 'antd';
import './index.scss';

const FormItem = Form.Item;
class QuestionOption extends React.PureComponent {
  handleChange() {
    const { form } = this.props;
    const optionValue = form.getFieldsValue();
    if (optionValue.sigOption) {
      this.props.onChange(form.getFieldsValue());
      return;
    }
    if (optionValue.sigCheck) {
      if (!optionValue.sigOption) {
        message.warn('请完善该选项', 3);
        this.props.onChange(undefined);
      }
    }
    if (!optionValue.sigOption && !optionValue.sigCheck) {
      this.props.onChange(undefined);
    }
  }
  render() {
    const { form, value } = this.props;
    const { getFieldDecorator } = form;
    return (
      <Form layout={'inline'} className="question-option-form" onChange={this.handleChange.bind(this)} >
        <FormItem>
          {getFieldDecorator('sigOption', {
            initialValue: value ? value.sigOption : ''
          })(
            <Input placeholder="请输入选项" rows={4} style={{ width: 840, height: 40 }} />
          )}
        </FormItem>
        <FormItem>
          {getFieldDecorator('sigCheck', {
            valuePropName: 'checked',
            initialValue: value ? value.sigCheck : false
          })(
            <Checkbox>正确答案</Checkbox>
          )}
        </FormItem>
      </Form>
    );
  }
}

export default Form.create()(QuestionOption);
